// 路由器的配置文件
// 1.安装
// 2.引入并声明使用
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) //声明使用插件,所有的vue官方插件都要声明使用, 第三放插件不需要
// 本质是在调用内部的 install 方法,只有调用它,插件的功能才会添加到Vue和vm身上


import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'

// 将原有的push方法地址,保存起来,后期还能拿到原来的
const originPush = VueRouter.prototype.push
const originReplace = VueRouter.prototype.replace
// 可以大胆的修改原型的push 让原型的push指向另一个函数
VueRouter.prototype.push = function(location,onResolved,onRejected){
    // location 就是我们调用 this.$router.push传递过来的对象
    // {
    //     name:'search',
    //     params:{keyword:this.keyword || undefined},
    //     query:{keyword1:this.keyword.toUpperCase()}
    // }
    if(onResolved === undefined && onRejected === undefined){
        // 证明调用的时候值传递了个匹配路由的对象,没有传递成功或失败的回调
        return originPush.call(this, location).catch(()=>{})
    }else{
        // 证明调用的时候传递了成功或失败的回调,或者都有
        return originPush.call(this, onResolved,onRejected)
        // 这样就解决了,编程式路由跳转当前路由,参数不变,多次执行就会抛出Navigation Duplicated 的警告错误了
    }
}

VueRouter.prototype.replace = function(location, onResolved, onRejected){
    if(onResolved === undefied && onRejected === undefined){
        return originReplace.call(this,location).catch(()=>{})
    }else{
        return originReplace.call(this,onResolved, onRejected)
    }
}












// 3.必须往外暴露一个路由器对象
export default new VueRouter({
    // 配置路由
    routes:[
        {  //路径
            path:'/home',
           //注册组件
           component:Home
        },
        {  //路径
            path:'/search/:keyword?',
           //注册组件
           component:Search,
           name:'search', // 命名路由
        // props:  可以传递 静态,布尔,函数     //这个props使我们在路由组件当中操作params参数和query参数的简化方法
        // props:true,     // 会默认吧传递过来params参数,额外的映射为组件当中的属性去操作
        //    props:{user:'zhaoliying'} // 传递一个对象,传递的是额外你需要的静态数据,不需要就不用
            props:(route)=>{
                return {keyword:route.params.keyword, keyword1:route.query.keyword1}
            }
            
        },
        {  //路径
            path:'/login',
           //注册组件
           component:Login,
           // 路由对象当中的元配置项,可以配置我们所需要的任何数据
           meta:{
            isHidden:true
           }
        },
        {  //路径
            path:'/register',
           //注册组件
           component:Register,
           meta:{
            isHidden:true
           }
        },
        //重定向路由
        {
            path:'/',
            redirect:'/home'
        }
    ]//配置路由  路由就是路径和组件之间的映射关系
})
// 4.必须在Vue的配置对象当中注册路由器对象 (也就是在main文件当中注册)